<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>grid 布局</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./grid.css">
</head>

<body>
    <h1>基础网格，grid-template-columns: 200px 200px 200px || 1fr 1fr 1fr || 500px 1fr 2fr || repeat(3, 1fr) || 20px
        repeat(3, 1fr) 20px || repeat(5, 1fr 2fr)</h1>
    <div class="grid">
        <div class="box">One</div>
        <div class="box">Two <br><br> I have some more content in. <br><br> This makes me taller than 100 pixels.</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div>
    <h1>指定行与行的间隔，或列与列的间隔，grid-row-gap , grid-column-gap, grid-gap </h1>
    <div class="gap">
        <div class="box">One</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div>
    <h1>使用网格线来指定盒子的位置大小，grid-column-start: 1; grid-column-end: 4;grid-row-start: 1;grid-row-end: 3; <br>
        grid-area: 1 / 4 / 1 / 3;
    </h1>
    <div class="startend">
        <div class="box box1">One <br> grid-column-start: 1; <br>
            grid-column-end: 4; <br>
            grid-row-start: 1; <br>
            grid-row-end: 3; </div>
        <div class="box box2">Two <br> grid-column-start: 1; <br>
            grid-row-start: 3; <br>
            grid-row-end: 5; </div>
        <div class="box box3">Three</div>
        <div class="box box4">Four</div>
        <div class="box box5">Five</div>
    </div>
    <h1>单元格内容位置，justify-items, align-items, place-items: align-items justify-items;</h1>
    <div class="items1">
        <div class="box">One <br> justify-items: center</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div><br>
    <div class="items2">
        <div class="box">One <br> justify-items: start</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div><br>
    <div class="items3">
        <div class="box">One <br> justify-items: end</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div>
    <div class="items4">
        <div class="box">One <br> justify-items: center</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div><br>
    <div class="items5">
        <div class="box">One <br> justify-items: start</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div><br>
    <div class="items6">
        <div class="box">One <br> justify-items: end</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div>
    <h1>整个内容区域位置：justify-content, align-content, place-content</h1>
    <div class="content1">
        <div class="box">One <br> justify-content: center</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div><br>
    <div class="content2">
        <div class="box">One <br> justify-content: start</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div><br>
    <div class="content3">
        <div class="box">One <br> justify-content: end</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div>
    <div class="content4">
        <div class="box">One <br> justify-content: space-between</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div>
    <div class="content5">
        <div class="box">One <br> justify-content: space-around</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div>
    <div class="content6">
        <div class="box">One <br> justify-content: space-evenly</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
        <div class="box">Four</div>
        <div class="box">Five</div>
    </div>
    <h1>除了 display: grid ，还有 display: inline-grid</h1>
    <div class="outer">
        <span>inline-grid</span>
        <div class="inline-grid">
            <div class="box">One</div>
            <div class="box">Two</div>
            <div class="box">Three</div>
            <div class="box">Four</div>
            <div class="box">Five</div>
        </div>
        <span>inline-grid</span>
    </div>
    <h1>
        <small>参考文章，<a href="http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html">CSS Grid 网格布局教程</a>，<a
                href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout">MDN 的网格布局
            </a></small><a href="../../index.html">返回</a>
    </h1>
</body>

</html>